<template>
	<view class="invie-wrapper">
		<navBar title="邀请有礼" :backgroundColor="scrollTop?rgba(0,0,0,0):'#CA2927'" fontColor="#fff" />

		<view class="invie-content"
			:style="{'padding-top': paddingTop + 'px',height:'calc(100vh - '+ paddingTop + 'px)'}">
			<view class="invie-box">
				<view class="invie-title">
					<view class="rules-wrap"><text class="title" @click="rulesShow=true"
							v-if="activeInfo.actFlag&&activeInfo.activity.rule">活动规则</text></view>
					<view class="invie-h1">
						{{activeInfo.activity&&activeInfo.activity.actName?activeInfo.activity.actName:'邀新人赚100优惠券' }}
					</view>
					<view class="invie-h2">
						{{activeInfo.activity&&activeInfo.activity.actSubName?activeInfo.activity.actSubName:'新人注册，新人得180元礼包' }}
					</view>
				</view>
				<view class="step-rules">
					<view class="step-title">VIP还可获得（好友下单奖励）多邀多得</view>
					<view class="step-icon">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/invite/step.png"
							mode=""></image>
					</view>
				</view>
				<view class="step-flow">
					<view class="step-bar">
						<view class="step-bar-info">
							<image
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/invite/bar.png">
							</image>
							<view class="title">简单三步 赚积分</view>
						</view>
					</view>
					<view class="flow-list">
						<view class="flow-item">
							<view class="img line dot">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/invite/icon1.png"
									mode=""></image>
							</view>
							<view class="title">分享链接</view>
							<view class="title">邀请群主</view>
						</view>
						<view class="flow-item">
							<view class="img line dot">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/invite/icon2.png"
									mode=""></image>
							</view>
							<view class="title">车主</view>
							<view class="title">注册下载</view>
						</view>
						<view class="flow-item">
							<view class="img">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/invite/icon3.png"
									mode=""></image>
							</view>
							<view class="title">登录后</view>
							<view class="title">消费返积分</view>
						</view>
					</view>
				</view>
				<view class="person">
					<view class="step-bar">
						<view class="step-bar-info">
							<image
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/invite/bar.png">
							</image>
							<view class="title">我的邀请收益</view>
						</view>
					</view>
					<view class="tab">
						<view class="tab-item" :class="{'active':currentIndex == 1}" @click="handleTab(1)">
							<view>{{ registerTotal }}人</view>
							<view>已邀注册</view>
						</view>
						<view class="tab-item" :class="{'active':currentIndex == 2}" @click="handleTab(2)">
							<view>{{ authTotal }}人</view>
							<view>已邀认证</view>
						</view>
						<view class="tab-item" :class="{'active':currentIndex == 3}" @click="handleTab(3)">
							<view>{{ integralTotal }}分</view>
							<view>累计积分收益</view>
						</view>
					</view>
					<view class="person-list">
						<scroll-view scroll-y="true" style="height: 510rpx;" @scrolltolower="pullData"
							@refresherrefresh="refreshData" refresher-enabled="true" :refresher-triggered="triggered">
							<view class="list-item" v-for="item in list" @click="goDetail(item)">
								<view class="atv">
									<image :src="item.headImgUrl?item.headImgUrl:'../../static/currentImg.png'" mode="">
									</image>
								</view>
								<view class="person-info " :class="{'active':currentIndex==3}">
									<view class="phone" v-if="currentIndex==1 ||currentIndex ==2">
										{{ item.nickname}}(间接推荐人数{{item.recomNum}})
									</view>
									<view class="phone" v-if="currentIndex==3">{{ item.title}}</view>
									<view class="dec" v-if="currentIndex==1 ||currentIndex ==2">好友认证身份，享购胎有礼、万元抽奖卡友福利
									</view>
									<view class="dec" v-if="currentIndex==3">{{ item.changeTime}}</view>
								</view>
								<view class="jf" v-if="currentIndex==3">
									+{{ item.integral }}
								</view>
							</view>
							<view v-else class="empty" v-if="list.length == 0">
								<image src="../../static/empty.png"></image>
								<text>无数据</text>
							</view>
						</scroll-view>
					</view>
					<view class="share">
						<view class="btn" @click="show=true">立即邀请好友</view>
					</view>
				</view>
			</view>

		</view>
		<view class="bg">
			<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/invite/bg.png" mode="">
			</image>
		</view>
		<!-- 规则 -->
		<u-popup :show="rulesShow" @close="rulesShow=false" mode="bottom" :closeable="true" close-icon-size="60">
			<view class="rlue-modal">
				<view class="title">活动规则</view>
				<view class="date" v-if="activeInfo.activity.beginTime">
					活动时间：{{ activeInfo.activity.beginTime}} - {{ activeInfo.activity.endTime?activeInfo.activity.endTime:'长期有效'}}
				</view>
				<view class="content">
					{{ activeInfo.activity.rule}}
				</view>
				<view class="tip">活动最终解释权归山东玲珑轮胎所有</view>
				<view class="btn">
					<u-button type="primary" text="确定" @click="rulesShow=false"></u-button>
				</view>

			</view>
		</u-popup>
		<!-- 分享组件 -->
		<share :isOpen="show" @cancel="show=false" @onShareTimeline="onShareTimeline" :shareId="activeInfo.shareId" :shareBtn="true">
		</share>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import share from '@/components/share.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			navBar,
			share
		},
		data() {
			return {
				detailInfo: {},
				paddingTop: '',
				show: false,
				currentId: '',
				currentIndex: 1,
				triggered: true,
				scrollTop: false,
				activeInfo: null,
				pageNum: 1,
				pageSize: 15,
				list: [],
				total: 0,
				registerTotal: 0,
				authTotal: 0,
				integralTotal: 0,
				rulesShow: false
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			//切换
			handleTab(val) {
				this.currentIndex = val
				this.pageNum = 1
				this.list = []
				if (this.currentIndex == 1) {
					this.getUserList('N')
				}
				if (this.currentIndex == 2) {
					this.getUserList('Y')
				}
				if (this.currentIndex == 3) {
					this.getIntegralList()
				}
			},
			//获取活动信息
			async getActiveInfo() {
				try {
					const res = await this.$request({
						method: 'get',
						url: '/api-user/app/share/getShareLink',
					})
					this.activeInfo = res.datas

					if (this.activeInfo.actFlag&&this.activeInfo.activity.beginTime) {
						this.activeInfo.activity.beginTime = uni.$u.date(new Date(this.activeInfo.activity.beginTime)
							.getTime(), 'yyyy年mm月dd日')
					}
					if (this.activeInfo.actFlag&&this.activeInfo.activity.endTime) {
						this.activeInfo.activity.endTime = uni.$u.date(new Date(this.activeInfo.activity.endTime)
							.getTime(), 'yyyy年mm月dd日')
					}
				} catch (res) {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			},
			//获取列表总数
			async getLisTotal() {
				try {
					const res = await this.$request({
						method: 'get',
						url: '/api-user/app/share/getShareUserList',
						data: {
							certFlag: 'Y',
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							userId: this.getUserInfo.id
						}
					})
					this.authTotal = res.datas.count
				} catch (res) {

				}
				try {
					const res = await this.$request({
						method: 'get',
						url: '/api-user/app/share/getShareUserList',
						data: {
							certFlag: 'N',
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							userId: this.getUserInfo.id
						}
					})
					this.registerTotal = res.datas.count
				} catch (res) {

				}
				try {
					const res = await this.$request({
						method: 'get',
						url: '/marketing-center/integralRuleDetails/app/share/list',
						data: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							userId: this.getUserInfo.id
						}
					})
					this.integralTotal = res.datas.totalIntegral
				} catch (res) {

				}
			},
			//获取注册和认证用户列表
			async getUserList(val) {
				// certFlag 是否认证(Y-是,N-否)
				try {
					const res = await this.$request({
						method: 'get',
						url: '/api-user/app/share/getShareUserList',
						data: {
							certFlag: val,
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							userId: this.getUserInfo.id
						}
					})
					this.list = this.list.concat(res.datas.data)
					this.total = res.datas.count
					this.triggered = false
					uni.hideLoading()
				} catch (res) {
					this.triggered = false
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
				uni.stopPullDownRefresh();
			},
			//获取积分收益列表
			async getIntegralList() {
				try {
					const res = await this.$request({
						method: 'get',
						url: '/marketing-center/integralRuleDetails/app/share/list',
						data: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							userId: this.getUserInfo.id
						}
					})
					this.list = this.list.concat(res.datas.pageResult.data)
					this.total = res.datas.pageResult.count
					this.triggered = false
					uni.hideLoading()
				} catch (res) {
					this.triggered = false
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
				uni.stopPullDownRefresh();

			},
			// 滚动刷新
			pullData() {
				if (this.total >= this.list.length) {
					return false
				}
				this.pageNum++
				if (this.currentIndex == 1) {
					this.getUserList('N')
				}
				if (this.currentIndex == 2) {
					this.getUserList('Y')
				}
				if (this.currentIndex == 3) {
					this.getIntegralList()
				}

			},
			//下拉刷新
			refreshData() {
				this.list = []
				this.triggered = true
				if (this.currentIndex == 1) {
					this.getUserList('N')
				}
				if (this.currentIndex == 2) {
					this.getUserList('Y')
				}
				if (this.currentIndex == 3) {
					this.getIntegralList()
				}
			},
			//间接好友查看
			goDetail(item) {
				if (this.currentIndex == 3) {
					return false
				}
				uni.navigateTo({
					url: `/indexPack/invite/detail`,
					success: (res) => {
						res.eventChannel.emit('detailInfo', {
							data: item
						})
					}
				})

			}


		},
		onLoad(option) {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			this.list = []
			this.getActiveInfo()
			this.getUserList('N')
			this.getLisTotal()
		},
		// 分享到聊天
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: '卡友之家|让卡友省心省力省钱!',
					desc: '我一直在使用卡友之家送你一份换胎大礼包，限时免费领取',
					path: `/pages/webview/webview?shareId=${this.activeInfo.shareId}`,
					imageUrl: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'
				}
			}
			return {
				title: '阿特拉斯核销码',
				path: '/pages/index',
				imageUrl: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'
			}
		},

	}
</script>

<style lang="scss" scoped>
	.rlue-modal {
		height: 50vh;
		padding: 30rpx 20rpx;
		overflow-y: auto;
		line-break: anywhere;

		.title {
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			text-align: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;
		}

		.date {
			margin-bottom: 10rpx;
			font-size: 14px;
		}

		.content {
			margin-bottom: 10rpx;
			font-size: 14px;
			max-height: 52%;
			overflow: hidden;
			overflow-y: auto;
		}

		.tip {
			font-size: 12px;
			margin-top: 30rpx;
			color: rgba(0, 0, 0, 0.5);
		}

		.btn {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
		}
	}

	.invie-wrapper {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);

		.empty {
			width: 100%;
			height: 80%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 180px;
				height: 160px;
			}

			text {
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.45);
				line-height: 30rpx;
			}
		}

		.invie-content {
			position: relative;
			overflow: hidden;
			overflow-y: auto;
			width: 100%;
			z-index: 2;

			.invie-box {
				padding: 0 32rpx;
				padding-bottom: 100rpx;

				.invie-title {
					padding: 0 50rpx;
					padding-top: 128rpx;
					padding-bottom: 62rpx;
					position: relative;

					.rules-wrap {
						display: flex;
						justify-content: flex-end;
						position: absolute;
						position: absolute;
						right: -18px;
						top: 20px;

						.title {
							border-top-left-radius: 15rpx;
							border-bottom-left-radius: 15rpx;
							font-size: 14px;
							background: #fff;
							width: 144rpx;
							height: 52rpx;
							right: 0;
							color: #CF1A1B;
							text-align: center;
							line-height: 52rpx;
						}

					}

					.invie-h1 {
						font-size: 30px;
						font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
						font-weight: 800;
						text-align: center;
						line-break: anywhere;
						color: #FFFFFF;
						margin-bottom: 28rpx;
					}

					.invie-h2 {
						font-size: 20px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						line-break: anywhere;
						color: #FFD6D7;
						text-align: center;
					}
				}

				.step-rules {
					padding: 52rpx 62rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					margin-bottom: 96rpx;

					.step-title {
						font-size: 16px;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.85);
						margin-bottom: 64rpx;
						text-align: center;
					}

					.step-icon {
						width: 100%;
						height: 200rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.step-flow {
					padding: 52rpx 62rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					position: relative;
					margin-bottom: 96rpx;

					.step-bar {
						position: absolute;
						top: -35rpx;
						left: 0;
						width: 100%;
						display: flex;
						justify-content: center;

						.step-bar-info {
							width: 406rpx;
							height: 64rpx;
							position: relative;

							image {
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
								width: 100%;
								height: 100%;
							}

							.title {
								position: relative;
								z-index: 2;
								height: 100%;
								text-align: center;
								line-height: 64rpx;
								color: #fff;
								width: 100%;
								font-size: 17px;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
							}
						}
					}

					.flow-list {
						margin-top: 42rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.flow-item {
							width: 33%;
							text-align: center;
							font-size: 26rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.85);

							.img {
								width: 100%;
								height: 98rpx;
								position: relative;

								image {
									position: relative;
									width: 98rpx;
									z-index: 2;
									height: 100%;
								}
							}

							.line::after {
								content: '';
								position: absolute;
								width: 100%;
								top: 50%;
								left: 50%;
								z-index: 1;
								height: 8rpx;
								background: #FFE8E8;
							}

							.dot::before {
								content: '';
								position: absolute;
								width: 16rpx;
								height: 16rpx;
								background: #FF9A38;
								border-radius: 50%;
								top: 47%;
								left: 96%;
								z-index: 2
							}
						}
					}
				}

				.person {
					background: #FFFFFF;
					border-radius: 8rpx;
					position: relative;

					.step-bar {
						position: absolute;
						top: -35rpx;
						left: 0;
						width: 100%;
						display: flex;
						justify-content: center;

						.step-bar-info {
							width: 406rpx;
							height: 64rpx;
							position: relative;

							image {
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
								width: 100%;
								height: 100%;
							}

							.title {
								position: relative;
								z-index: 2;
								height: 100%;
								text-align: center;
								line-height: 64rpx;
								color: #fff;
								width: 100%;
								font-size: 17px;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
							}
						}
					}

					.tab {
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 1px solid #eee;
						width: 100%;
						padding-bottom: 22rpx;
						padding-top: 46rpx;

						.tab-item {
							text-align: center;
							width: 33%;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #918F8A;
						}

						.active {
							color: #CF1A1B;
							transition: all .5s;
						}
					}

					.share {
						position: absolute;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						bottom: -40rpx;

						.btn {
							width: 418rpx;
							height: 80rpx;
							background: linear-gradient(124deg, #FB7B00 0%, #FF9A38 100%);
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							color: #fff;
							text-align: center;
							line-height: 80rpx;
						}
					}

					.person-list {
						height: 510rpx;
						padding: 0 40rpx;
						padding-bottom: 80rpx;

						.list-item {
							display: flex;
							padding-top: 14rpx;
							padding-bottom: 46rpx;
							border-bottom: 1px solid #eee;
							align-items: center;

							.atv {
								width: 96rpx;
								height: 96rpx;
								border-radius: 50%;
								margin-right: 16rpx;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.person-info {
								width: calc(100% - 115rpx);

								.phone {
									font-size: 14px;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.85);
									margin-bottom: 22rpx;
									word-wrap: break-all;
									overflow: hidden;
									line-break: anywhere;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									line-clamp: 1;
									-webkit-box-orient: vertical;
								}

								.dec {
									font-size: 12px;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.45);
									word-wrap: break-all;
									overflow: hidden;
									line-break: anywhere;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									line-clamp: 1;
									-webkit-box-orient: vertical;
								}
							}

							.active {
								width: calc(100% - 235rpx);
							}

							.jf {
								width: 120rpx;
								color: #EE3B3B;
								text-align: right;

							}
						}
					}
				}
			}

		}
	}

	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
